<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滚动监听</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<!--这要在body里设置滚动监听-->                          <!--偏移量-->
	<body data-spy = "scroll" data-target = ".navbar" data-offset="70">
		<div class="container">
			<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
				<div class="container-fluid">
					<div class="collapse navbar-collapse js-navbar-scrollspy"
						id="myScrollspy">
						<ul class="nav  navbar-nav">
							<li><a href="#dema">@dema</a></li>
							<li><a href="#dema2">@dema2</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									下拉菜单
									<span class="caret"></span>
								</a>
								<ul class="dropdown-menu" role="menu">
									<li role="presentation"><a href="#one" tabindex="-1">hello</a></li>
									<li role="presentation"><a href="#two" tabindex="-1">hello</a></li>
									<li role="presentation"><a href="#three" tabindex="-1">hello</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</nav>
			
			<br /><br /><br /><br />
			<h2 id="dema">@dema</h2>
			<p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			</p>
			<hr />
			
			<br /><br /><br /><br />
			<h2 id="dema2">@dema2</h2>
			<p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			</p>
			<hr />
			
			<br /><br /><br /><br />
			<h2 id="one">one</h2>
			<p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			</p><hr />
			
			<br /><br /><br /><br />
			<h2 id="two">two</h2>
			<p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			</p><hr />
			
			<br /><br /><br /><br />
			<h2 id="three">three</h2>
			<p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
			</p><hr />
		</div>
		
		<script type="text/javascript">
									/*当滚动到那里，就执行的事件*/
				$("#myScrollspy").on("activate.bs.scrollspy",function(e){
					alert("hello");
				})
		</script>
	</body>
</html>
